<template>
  <div>
    <el-col :span="8">
      <ve-line class="model1" style="width: 98%;margin: 0;border-style: solid;border-width: 3px;border-color: #D2B48C;padding: 0"
               :data="modelData1"
               :extend="chartExtend"
               :colors="colors1"
               :height="container_height"
               judge-width
      ></ve-line>
    </el-col>
    <el-col :span="8">
      <ve-line class="model2" style="width: 98%;margin: 0;border-style: solid;border-width: 3px;border-color: #D2B48C;padding: 0"
               :data="modelData2"
               :extend="chartExtend"
               :colors="colors1"
               :height="container_height"
               judge-width
      ></ve-line>
    </el-col>
    <el-col :span="8">
      <ve-line class="model3" style="width: 98%;margin: 0;border-style: solid;border-width: 3px;border-color: #D2B48C;padding: 0"
               :data="modelData3"
               :extend="chartExtend"
               :colors="colors1"
               :height="container_height"
               judge-width
      ></ve-line>
    </el-col>
    <el-col :span="8">
      <ve-line class="model4" style="width: 98%;margin-top: 10px;border-style: solid;border-width: 3px;border-color: #D2B48C;padding: 0"
               :data="modelData4"
               :extend="chartExtend"
               :colors="colors1"
               :height="container_height"
               judge-width
      ></ve-line>
    </el-col>
    <el-col :span="8">
      <ve-line class="model5" style="width: 98%;margin-top: 10px;border-style: solid;border-width: 3px;border-color: #D2B48C;padding: 0"
               :data="modelData5"
               :extend="chartExtend"
               :colors="colors1"
               :height="container_height"
               judge-width
      ></ve-line>
    </el-col>
    <el-col :span="8">
      <ve-line class="model6" style="width: 98%;margin-top: 10px;border-style: solid;border-width: 3px;border-color: #D2B48C;padding: 0"
               :data="modelData6"
               :extend="chartExtend"
               :colors="colors1"
               :height="container_height"
               judge-width
      ></ve-line>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'StateModel',
  data () {
    this.chartExtend = {
      grid: {
        show: true,
        x: 10,
        y: 40,
        x2: 15,
        y2: 10,
        borderwidth: 2,
        borderColor: '#d04714'
      },
      yAxis: {
        type: 'value',
        min: 140,
        max: 250
      }
    }
    this.colors1 = ['#d04714']
    return {
      diag: [],
      container_height: '400px',
      modelData1: {
        columns: ['循环次数', '正常状态'],
        rows: []
      },
      modelData2: {
        columns: ['循环次数', '未焊透未融合'],
        rows: []
      },
      modelData3: {
        columns: ['循环次数', '夹渣及夹钨'],
        rows: []
      },
      modelData4: {
        columns: ['循环次数', '几何形状不合要求'],
        rows: []
      },
      modelData5: {
        columns: ['循环次数', '烧穿'],
        rows: []
      },
      modelData6: {
        columns: ['循环次数', '气孔'],
        rows: []
      }
    }
  },
  methods: {
    paint_model_1 () {
      this.modelData1.rows = []
      for (var i = 0; i < this.diag.length; i++) {
        this.modelData1.rows.push({
          '循环次数': String(i + 1),
          '正常状态': this.diag[i][0]
        })
      }
    },
    paint_model_2 () {
      this.modelData2.rows = []
      for (var i = 0; i < this.diag.length; i++) {
        this.modelData2.rows.push({
          '循环次数': String(i + 1),
          '未焊透未融合': this.diag[i][1]
        })
      }
    },
    paint_model_3 () {
      this.modelData3.rows = []
      for (var i = 0; i < this.diag.length; i++) {
        this.modelData3.rows.push({
          '循环次数': String(i + 1),
          '夹渣及夹钨': this.diag[i][2]
        })
      }
    },
    paint_model_4 () {
      this.modelData4.rows = []
      for (var i = 0; i < this.diag.length; i++) {
        this.modelData4.rows.push({
          '循环次数': String(i + 1),
          '几何形状不合要求': this.diag[i][3]
        })
      }
    },
    paint_model_5 () {
      this.modelData5.rows = []
      for (var i = 0; i < this.diag.length; i++) {
        this.modelData5.rows.push({
          '循环次数': String(i + 1),
          '烧穿': this.diag[i][4]
        })
      }
    },
    paint_model_6 () {
      this.modelData6.rows = []
      for (var i = 0; i < this.diag.length; i++) {
        this.modelData6.rows.push({
          '循环次数': String(i + 1),
          '气孔': this.diag[i][5]
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
